@extends('layouts.appManager')

@section('title')广告管理 - @endsection

@section('style')
    <style>
        .el-calendar-table .el-calendar-day{
            padding: 0 !important;
            height: 70px !important;
            background-color: #e1e1e1;
        }
        .el-calendar-table .el-calendar-day .dateCell{
            height: 100%;
            padding: 8px;
        }
        .el-calendar-table .el-calendar-day .can{
            background-color: #00ff8838;
            /*border: 2px solid #3598ff;*/
        }
        .el-calendar-table .el-calendar-day .el-input__inner{
            padding: 0 0 0 5px;
        }
        .el-calendar-table .el-calendar-day .el-button{
            padding: 6px 8px;
        }
    </style>
@endsection

@section('content')
    <div class="container py-5">

        <div style="text-align: end">
            <el-button type="primary" size="small" @click="addShow" :disabled="adList.length>=3">
                添加
            </el-button>
        </div>
        <el-table
            ref="singleTable"
            highlight-current-row
{{--            @current-change="handleCurrentChange"--}}
            :data="adList"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="id"
                width="50">
            </el-table-column>
            <el-table-column
                prop="title"
                label="内容/链接"
                >
                <template slot-scope="scope">
                    <div v-if="currentRow && currentRow.id===scope.row.id" style="font-weight: bold">
                        @{{ scope.row.title }}
                    </div>
                    <div v-else>
                        @{{ scope.row.title }}
                    </div>

                    <a :href="scope.row.url" target="_blank">
                        <img v-if="scope.row.img" :src="scope.row.img" :alt="scope.row.title" class="adimg">
                        <template v-else>
                            @{{ scope.row.url }}
                        </template>
                    </a>
                    <div></div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="200">
                <template slot-scope="scope">
                    <div v-if="scope.row.status!==1">
                        @{{ scope.row.status|status }}
                    </div>
                    <div v-else>
                        <el-button type="success" size="small" @click="setCurrent(scope.row)">
                            投放
                        </el-button>
                        <el-button type="primary" size="small" @click="showClickInfo(scope.row)">
                            效果
                        </el-button>
                    </div>

                </template>
            </el-table-column>
            <el-table-column width="180" label="操作">
                <template slot-scope="scope">

                    <el-button type="danger" plain size="small" @click="del(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <br><br>

        <div v-if="currentRow">
            <el-alert
                title="下方日历，绿色为可规划日期。 当天展示广告的顺序为竞价模式，数字为此广告当天出价。出价越高，排名越靠前。前3名，将在首页展示。0为不展示。"
                type="info"
                effect="dark">
            </el-alert>
            <el-calendar v-model="date">
                <template
                    slot="dateCell"
                    slot-scope="{date, data}">
                    <div class="dateCell" :class="{'is-selected' : data.isSelected, 'can':Object.keys(pList).indexOf(data.day)>-1}">
                        @{{ data.day.split('-').slice(1).join('-') }}
{{--                        @{{ data.isSelected ? '⭐️' : ''}}--}}
{{--                        @{{ Object.keys(pList).indexOf(data.day)>-1?1:0 }}--}}

                        <div v-if="Object.keys(pList).indexOf(data.day)>-1">
                            <el-input placeholder="请输入内容" v-model="currentRow.prices[data.day]" min="0" type="number" size="mini" class="input-with-select">
                                <el-button slot="append" @click="save(data.day)">保存</el-button>
                            </el-input>
                        </div>
                        <div v-else-if="data.day<Object.keys(pList)[0]" style="text-align: end">
                            <el-link type="primary" @click="showLog(data.day)">出价情况</el-link>
                        </div>
                    </div>
                </template>
            </el-calendar>
        </div>

    </div>

    <el-dialog
        title="添加广告"
        :visible.sync="addDialogVisible"
        v-if="curAddItem"
        width="50%">
        <div>
            <el-form label-width="120px">
                <el-form-item label="广告标题">
                    <el-input v-model="curAddItem.title" placeholder="请输入广告标题"></el-input>
                </el-form-item>
                <el-form-item label="广告链接">
                    <el-input v-model="curAddItem.url" placeholder="请输入广告链接"></el-input>
                </el-form-item>
                <el-form-item label="广告图片地址">
                    <el-input v-model="curAddItem.img" placeholder="请输入广告图片地址（可选，推荐尺寸：1200x100）"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDo">保 存</el-button>
        </span>
    </el-dialog>

    <el-dialog
        title="出价情况"
        :visible.sync="logDialogVisible"
        width="30%">
        <div>
            <el-table
                :data="logList"
                style="width: 100%">
                <el-table-column
                    label="链接">
                    <template slot-scope="scope">
                        <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 14px">
                            <a :href="scope.row.advert.url" target="_blank">@{{scope.row.advert.title}}</a>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="price" width="80"
                    label="出价">
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="logDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
        title="点击情况（每一次点击都是精准用户！）"
        :visible.sync="clickDialogVisible"
        width="40%">
        <div>

        </div>
        <div>
            <el-table
                :data="clickList"
                style="width: 100%">
                <el-table-column
                    prop="ip"
                    label="ip">
                </el-table-column>
                <el-table-column
                    prop="created_at" width="180"
                    label="点击时间">
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="clickDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>

@endsection

@section('script')
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                activeName:'first',
                date: new Date(),
                adList:[],
                currentRow: null,
                curAddItem:null,
                pList:[],
                logDialogVisible:false,
                clickDialogVisible:false,
                addDialogVisible:false,
                logList:[],
                clickList:[],
            },
            mounted() {
                this.getList();
                this.getPList();
            },
            filters:{
                //处理函数
                status(index){
                    switch (index) {
                        case -2:
                            return '未通过审核';
                        case -1:
                            return '待审核';
                        case 0:
                            return '';
                        case 1:
                            return '通过审核';
                    }
                }
            },
            methods:{
                addDo(){
                    let t=this;
                    if (t.adList.length>=3){
                        t.$message({
                            type: 'info',
                            message: '最多添加3条广告'
                        });
                        return;
                    }
                    if (t.curAddItem.title===''){
                        t.$message({
                            type: 'info',
                            message: '请输入广告标题'
                        });
                        return;
                    }
                    if (t.curAddItem.url===''){
                        t.$message({
                            type: 'info',
                            message: '请输入广告链接'
                        });
                        return;
                    }
                    post('ad/add',t.curAddItem,res=>{
                        t.getList();
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                    },t)
                },
                addShow(){
                    this.curAddItem={
                        title:'',url:'',img:''
                    }
                    this.addDialogVisible=true
                },
                showLog(date){
                    let t=this;
                    post('ad/getLog',{date:date},res=>{
                        t.logList=res.logList;
                        t.logDialogVisible=true;
                    },t)
                },
                showClickInfo(item){
                    let t=this;
                    post('ad/getClickInfo',{id:item.id},res=>{
                        console.log(res);
                        t.clickList=res.clickList;
                        t.clickDialogVisible=true;
                    },t)
                },
                save(date){
                    let t=this;
                    console.log(t.currentRow.id,date,t.currentRow.prices[date])
                    post('ad/save',{
                        id:t.currentRow.id,
                        date:date,
                        price:t.currentRow.prices[date],
                    },res=>{
                        if (res.err===0){
                            $('#remain_money').html(res.data.toFixed(2));
                        }else{
                            t.$message({
                                type: 'error',
                                message: res.msg
                            });
                        }
                        console.log(res);
                    },t)
                },
                setCurrent(row) {
                    let t=this;
                    Object.keys(row.prices).forEach((k)=>{
                        t.pList[k].forEach(p=>{
                            if (p.advert_id===row.id){
                                row.prices[k]=p.price;
                            }
                        })
                    });

                    console.log(row);
                    t.$refs.singleTable.setCurrentRow(row);
                    t.currentRow = row;
                },

                getList(){
                    let t=this;
                    post('ad/list',{},res=>{
                        console.log(res);
                        t.adList=res.ads;
                    },t)
                },
                getPList(){
                    let t=this;
                    post('ad/plist',{},res=>{
                        console.log(res);
                        t.pList=res.pList;
                        console.log(Object.keys(t.pList))
                    },t)
                },
                add(){
                    let t=this;
                    if (t.adList.length>=3){
                        t.$message({
                            type: 'info',
                            message: '最多添加3条广告'
                        });
                        return;
                    }
                    t.$prompt('提交后无法修改', '请输入 广告内容', {
                        confirmButtonText: '下一步',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        let title=value;
                        t.$prompt('提交后无法修改，链接通常以 http:// 或 https:// 开头', '请输入 广告链接', {
                            confirmButtonText: '提交',
                            cancelButtonText: '取消',
                        }).then(({ value }) => {
                            let url=value;
                            debugger;
                            post('ad/add',{title:title,url:url},res=>{
                                t.getList();
                                this.$message({
                                    type: 'success',
                                    message: '添加成功'
                                });
                            },t)
                        }).catch(() => {
                        });
                    }).catch(() => {
                    });
                },
                del(id){
                    let t=this;
                    t.$confirm('已经安排的计划也将被删除，并且积分不会返还，是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        post('ad/del',{id:id},res=>{
                            if (res==='1'){
                                t.getList();
                                if(t.currentRow.id===id){
                                    t.currentRow=null;
                                }
                                this.$message({
                                    type: 'success',
                                    message: '删除成功'
                                });
                            }else{
                                this.$message({
                                    type: 'error',
                                    message: '删除失败'
                                });
                            }
                        },t)
                    }).catch(() => {});
                }
            }
        });
    </script>
@endsection
